<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from "vue";

const echarts1 = ref<any>(null);
const echarts2 = ref<any>(null);
const echarts3 = ref<any>(null);
const echarts4 = ref<any>(null);

type EChartsOption = echarts.EChartsOption;
let option: EChartsOption;
//右上代码
const getList = (ele: any) => {
    let myChart = echarts.init(ele.value, '');
    let base = +new Date(1968, 9, 3);
    let oneDay = 24 * 3600 * 1000;
    let date = [];

    let data = [Math.random() * 300];

    for (let i = 1; i < 20000; i++) {
        let now = new Date((base += oneDay));
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    }


    option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            left: 'center',
            text: 'Large Area Chart'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 10
            },
            {
                start: 0,
                end: 10
            }
        ],
        series: [
            {
                name: 'Fake Data',
                type: 'line',
                symbol: 'none',
                sampling: 'lttb',
                itemStyle: {
                    color: 'rgb(255, 70, 131)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }
                    ])
                },
                data: data
            }
        ]
    };


    option && myChart.setOption(option);
}
//左上代码

const getList1 = (ele: any) => {

    let myChart = echarts.init(ele.value, '');
    option = {
        title: [//标题组件，数组里的一个对象表示一个标题组件
            { text: '机组效率', left: '10%', top: '5%', textStyle: { color: "#000" } }
        ],
        series: [//系列
            {
                name: '机组效率',
                type: 'pie',//pie类型的图实现环形图
                radius: ['60%', '70%'],//数组的话，表示内圆和外圆的半径大小，相对于宽高中较小的那一个。
                center: ['70%', '50%'],//圆心坐标
                avoidLabelOverlap: false,//是否启用防止标签重叠策略
                startAngle: 270,//第一个数据开始绘制的角度，以正交直角坐标系为标准
                label: {//每个数据的标签
                    show: true,//设置为true则显示第一个数据
                    position: 'center',//位置居中
                    formatter: '完成进度{d}%',//{d}表示数据在总数据中的百分比
                    fontSize: 20,
                    fontWeight: 'bold'
                },
                color: ['#695BF9', '#1E3E55'],//系列的颜色
                emphasis: {//高亮，即鼠标经过时的样式
                    scale: false//表示不放大item
                },
                labelLine: {
                    show: true
                },
                data: [
                    { value: 80, name: '' },
                    {
                        value: 20, name: '', emphasis: {
                            label: {
                                show: false//这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
                            }
                        }
                    }
                ]
            }
        ]
    };
    option && myChart.setOption(option);
}
//左下代码
const getList2 = (ele: any) => {

let myChart = echarts.init(ele.value, '');
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Evaporation', 'Precipitation', 'Temperature']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '降水量',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: '气温',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: '本年气温',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return (value as number) + ' ml';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: '上年气温',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return (value as number) + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: '气温',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return (value as number) + ' °C';
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};

option && myChart.setOption(option);
}

//右下代码
const getList3 = (ele: any) => {

let myChart = echarts.init(ele.value, '');
option = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
};

option && myChart.setOption(option);
}


onMounted(() => {
    getList(echarts1);
    getList1(echarts2);
    getList2(echarts3);
    getList3(echarts4)

});
</script>
<template>
    <div class="common-layout">
        <div class="text"> 大屏页面</div>

        <div class="center">
            <div  class="echarts" ref="echarts1"></div>
            <div class="echarts" ref="echarts2"></div>
            <div class="echarts" ref="echarts3"></div>
            <div class="echarts" ref="echarts4"></div>
        </div>



    </div>
</template>

<style scoped lang="scss">
.common-layout {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #fff;
    overflow: hidden;

    .text {
        text-align: center;
    }

    .center {
        width: 100%;
        height: 95%;
        display: grid;
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
        grid-template-rows: calc(50% - 5px) calc(50% - 5px);
        justify-content: space-between;
        align-content: space-between;
        // background-color: #181818;
    }

}
</style>
